<template>
  <div>
    <div>
      <!-- 搜索结果页-头部导航 -->
      <div class="search-result-container">
        <!-- 点击实现后退效果 -->
        <van-nav-bar title="搜索结果" left-arrow @click-left="$router.go(-1)" fixed />
      </div>
    </div>

    <!-- 搜索结果列表 -->
    <div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false" offset="50">
        <!-- 告诉vue, 给这个标签绑定原生的click事件 -->
        <ArticleItem v-for="obj in articleList" :key="obj.art_id" :obj="obj" :isShowX="false" @click.native="clickFn(obj.art_id)"></ArticleItem>
      </van-list>
    </div>
  </div>
</template>

<script>
import { searchListAPI } from '@/api/search.js'
import ArticleItem from '@/components/Aticleitrm.vue'

export default {
  name: 'SearchResult',
  components: {
    ArticleItem
  },
  data() {
    return {
      articleList: [], // 搜索结果列表
      loading: false, // 底部加载状态(加载中...)
      finished: false, // 底部是否加载完成(false还有数据, true全都加载完了显示一句话)
      page: 1 // 当前页码
    }
  },
  methods: {
    // 触底执行事件方法(加载更多数据)
    onLoad() {
      this.page++
      this.getListFn()
    },
    // 获取列表
    async getListFn() {
      const res = await searchListAPI({
        q: this.$route.params.keywords,
        page: this.page
      })
      console.log(res)
      if (res.data.data.results.length === 0) {
        // 没有数据了
        this.finished = true // 加载完成
      }
      this.articleList = [...this.articleList, ...res.data.data.results]
      this.loading = false // 本次加载完成
    },
    // 点击文章
    clickFn(aid) {
      this.$router.push(`/article/${aid}`)
    }
  },
  created() {
    this.getListFn()
  }
}
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
</style>
